@charset "UTF-8";

/* 单选框 */
.#{$ns-obj}radio {
    cursor: pointer;
    user-select: none;
    & + & {margin-left: 15px;}

    & > input {  // 隐藏原生控件
        position: absolute;
        clip: rect(0 0 0 0);
        opacity: 0;
        outline: none;

        &:focus + .#{$ns-obj}label-text:before {
            border-color: $blue;
        }

        &:checked + .#{$ns-obj}label-text:before {
            content: '\25cf';
            color: $white;
            background: $blue;
            border-color: $blue;
        }

        &[disabled] + .#{$ns-obj}label-text {
            cursor: not-allowed;
            color: $gray;
            &:before {
                color: inherit;
                background-color: $dark-white;
                border-color: lighten($gray, 10%);
            }
        }
    }
}
.#{$ns-obj}label-text {
    font-size: 14px;

    &:before {
        content: '\a0';  // 不换号空格
        display: inline-block;
        width: $input-checkbox-size;
        height: $input-checkbox-size;

        margin-right: 3px;
        line-height: $input-checkbox-size;
        text-align: center;

        font-size: $input-checkbox-size - 2;
        font-family: Helvetica;  // 通用性极好的英文字体
        color: transparent;
        background: transparent;
        border: 1px solid $gray;
        border-radius: 50%;

        transition: background, color .2s ease-in-out;
    }

    &:hover:before {border-color: darken($dark-gray, 6%);}
}

/* 复选框 */
.#{$ns-obj}checkbox {
    @extend .#{$ns-obj}radio;

    & > input {
        &:checked + .#{$ns-obj}label-text:before {
            content: '\2713';
        }
    }

    & > .#{$ns-obj}label-text {
        &:before {border-radius: 4px;}
    }
}
